.sbom-container{
  .sbom-main{
    padding: 27px;
    border-radius: 4px;
    .table-top{
      padding: 20px 20px 20px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #ffffff;
      .table-title{
        height: 48px;
        line-height: 48px;
        background-color: #1330A0;
        border-radius: 0 24px 24px 0;
        font-size: 18px;
        font-weight: bold;
        color: #FEFEFE;
        padding: 0 20px 0 10px;
      }
    }
    .el-form {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .el-form-item{
        height: 36px;
        line-height: 36px;
        margin-right: 15px;
        margin-bottom: 0px;
        &:last-child{
          margin-right: 0px;
        }
        .el-form-item__label-wrap{
          margin-right: 10px;
          .el-form-item__label{
            height: 36px;
            line-height: 36px;
            margin-bottom: 0px;
            padding-right: 0px;
            color: #666666;
            font-size: 14px;
          }
        }
        .el-form-item__content{
          .el-select{
            margin:0;
          }
          .el-input__inner{
            height: 36px;
            background-color: #FFFFFF;
            border-radius: 4px;
            &::placeholder {
              color: #CFD5E3;
              font-size: 14px;
            }
          }
        }
      }
      .el-button--primary{
        background-color: #4971FF;
        border:none;
      }
    }
    .table-form{
      padding: 0 20px 0 20px;
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      .el-form{
        display: flex;
      }
      .el-form-item{
        margin-bottom: 20px;
      }
      .el-button{
        background-color: #4971ff;
        border: none;
      }
      .input{
        width: 100px;
      }
      .el-icon{
        margin-left: 8px;
      }
      .spe{
        margin-left: 6px;
        margin-right: 6px;
      }
    }
  }
}
.thirdPart .sbom-container .sbom-main{
  padding-left: 0px;
  padding-right: 0px;
}
.query-list{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .query-item{
    margin-left:30px;
    font-size: 14px;
    color: #666666;
    display: flex;
    align-items: center;
    span.label{
      min-width: 100px;
      text-align: right;
      margin-right: 10px;
    }
    .el-input__inner{
      height: 36px;
      &::placeholder {
        color: #CFD5E3;
        font-size: 14px;
      }
    }
    .el-switch.is-checked .el-switch__core{
      background-color: #4971FF;
      border-color: #4971FF;
    }
    .el-switch .el-switch__core{
      background-color: #C2C5E0;
      border-color: #C2C5E0;
    }
  }
}
.sbom-table{
  padding: 0 20px;
  background-color: #ffffff;
  .el-table{
    .el-table__body-wrapper{
      // max-height: calc(100vh - 555px);
      // height: auto;
      // overflow: auto;
    }
    th,td{
      padding: 0;
      border-bottom: none;
      .imgIcon{
        margin-right: 6px;
      }
    }
    td{
      border-right: none;
    }
    th > .cell,
    td > .cell {
      min-height: 48px;
      max-height: 120px;
      overflow-y: auto;
      padding: 4px 20px;
      font-size: 14px;
      display: flex;
      align-items: center;
      color: #000000;
      overflow-x: hidden;
      text-overflow: ellipsis; 
      white-space: nowrap;
      span {
        overflow: hidden;
        text-overflow: ellipsis; 
        white-space: nowrap;
      }
      a{
        color:#4971FF;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .nav-link{
        padding-left: 0;
        padding-right: 0;
      }
      .link{
        cursor: pointer;
        color:#4971FF;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .bgColor{
        width: 34px;
        text-align: center;
        border-radius: 8px;
        color: #ffffff;
        height: 16px;
        line-height: 16px;
        &.critical{
          background-color: #FF0000;
        }
        &.high{
          background-color: #FF9126;
        }
        &.medium{
          background-color: #EFCE18;
        }
        &.low{
          background-color: #67D68C;
        }
        &.none{
          background-color: #B5E1FF;
        }
      }
      .cellBox{
        width: 100%;
        overflow-x: auto;
        display: flex;
        align-items: center;
      }
    }
    .el-table__body {
      tr.el-table__row {
        td.cell-list .cell{
          flex-wrap: wrap;
          div{
            width: 100%;
            line-height: 24px;
            overflow-x: hidden;
            text-overflow: ellipsis; 
            white-space: nowrap;
          }
        } 
        &:hover td {
          background-color: #f2f4fc;
        }
      }
    }
    .el-table__header{
      // border: 1px solid #E2E3E8;
      tr th{
        background-color: #F3F4FC;
        font-weight: bold;
        color: #191A35;
      }
    }
    .el-table__empty-text{
      .no-data{
        color: #000000;
        font-size: 14px;
        p{
          margin-top: -20px;
        }
      }
    }
  }
  .sbom-pagination{
    background-color: #ffffff;
    text-align: right;
    padding-top: 20px;
    padding-bottom: 20px;
    .el-pagination {
      justify-content: flex-end;
      .btn-prev,
      .btn-next {
        background-color: #ffffff;
        height: 30px;
        line-height: 30px;
      }
      .el-pager {
        .number {
          height: 31px;
          background-color: #f4f4f5;
          border: 2px solid #f5f6fa;
          border-radius: 4px;
          font-size: 14px;
          font-weight: 500;
          color: #333333;
          &.is-active {
            background-color: #4971ff;
            color: #ffffff;
          }
        }
      }
      .el-input__inner {
        border: 2px solid #f5f6fa;
        border-radius: 4px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        font-size: 14px;
        font-weight: 500;
        color: #333333;
      }
      .el-select .el-input.is-focus .el-input__inner {
        border-color: transparent;
      }
      .el-pagination__sizes {
        .el-select .el-input {
          width: 120px;
          .el-select__caret {
            color: #333333;
          }
        }
      }
      .el-pagination__sizes .el-input .el-input__inner:hover {
        border-color: transparent;
      }
      .el-pagination__jump {
        color: #333333;
        margin-left: 15px;
      }
    }
  }
  .el-table__body-wrapper::-webkit-scrollbar {
    width: 8px; /*滚动条宽度*/
    height: 8px; /*滚动条高度*/
  }
 .el-table__body-wrapper::-webkit-scrollbar-track {
    border-radius: 10px; /*滚动条的背景区域的圆角*/
    -webkit-box-shadow: inset 0 0 6px rgba(238,238,238, 0.3);
    background-color: #eeeeee; /*滚动条的背景颜色*/
  }
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px; /*滚动条的圆角*/
    -webkit-box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3);
    background-color: rgb(145, 143, 143); /*滚动条的背景颜色*/
  }
  .cell::-webkit-scrollbar,
  .cellBox::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
 .cell::-webkit-scrollbar-track,
 .cellBox::-webkit-scrollbar-track {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 3px rgba(243, 237, 237, 0.3);
    background-color: #eeeeee;
  }
  .cell::-webkit-scrollbar-thumb,
  .cellBox::-webkit-scrollbar-thumb {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 3px rgba(233, 230, 230, 0.3);
    background-color: rgb(207, 205, 205);
  }
  
}
.sbom-dialog.el-dialog{
  // height: 100%;
  display: flex;
  display: -ms-flex; /* 兼容IE */
  flex-direction: column;
  -ms-flex-direction: column; /* 兼容IE */
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  // max-height:calc(100% - 30px);
  max-width: calc(100% - 30px);
  border-radius: 15px;
  .el-dialog__header {
    padding-bottom: 30px;
    .el-dialog__title {
      font-size: 18px;
      font-weight: bold;
      color: #191a36;
    }
    .el-dialog__headerbtn {
      font-size: 16px;
    }
  }
  .el-dialog__body {
    padding: 0px 20px 27px 20px;
    max-height: calc(100vh - 150px);
    overflow: auto;
    .packageBug-container{
      padding-top: 0;
    }
    .query-list{
      display: flex;
      justify-content: flex-end;
      position: fixed;
      top: 20px;
      right: 53px;
    }
  }
  
  .el-dialog__wrapper {
    background-color: rgba(51, 71, 98, 0.5);;
  }
}
.vulBtns{
  font-size: 14px;
  margin-right: 10px;
  height: 24px;
  line-height: 24px;
  cursor: pointer;
  .txt{
    color: #fff;
    display: inline-block;
    padding: 0 5px 0 10px;
    border-radius: 11px 0 0 11px;
    border: 1px solid #BDBFD1;
    background-color: #BDBFD1;
  }
  .num{
    display: inline-block;
    padding: 0 10px 0 7px;
    border-radius: 0px 11px 11px 0px;
    border: 1px solid #BDBFD1;
    color: #BDBFD1;       
    min-width: 34px;
    text-align: center;
  }
  &.vul0{
    .txt{
      background-color: #FF0000;
      border-color: #FF0000;
    }
    .num{
      color: #FF0000;
      border-color: #FF0000;
    }
  }
  // &.vul1{
  //   .txt{
  //     background-color: #D54656;
  //     border-color: #D54656;
  //   }
  //   .num{
  //     color: #D54656;
  //     border-color: #D54656;
  //   }
  // }
  &.vul1{
    .txt{
      background-color: #FF9126;
      border-color: #FF9126;
    }
    .num{
      color: #FF9126;
      border-color: #FF9126;
    }
  }
  &.vul2{
    .txt{
      background-color: #EFCE18;
      border-color: #EFCE18;
    }
    .num{
      color: #EFCE18;
      border-color: #EFCE18;
    }
  }
  &.vul3{
    .txt{
      background-color: #67D68C;
      border-color: #67D68C;
    }
    .num{
      color: #67D68C;
      border-color: #67D68C;
    }
  }
  &.vul4{
    .txt{
      background-color: #B5E1FF;
      border-color: #B5E1FF;
    }
    .num{
      color: #B5E1FF;
      border-color: #B5E1FF;
    }
  }
  &.vul5{
    .txt{
      background-color: #9402ff;
      border-color: #9402ff;
    }
    .num{
      color: #9402ff;
      border-color: #9402ff;
    }
  }
  &.vulZero{
	cursor: default;
	.txt{
      background-color: #BDBFD1;
      border-color: #BDBFD1;
    }
    .num{
      color: #BDBFD1;
      border-color: #BDBFD1;
    }
  }
}

.licenseItem{
  height: 32px;
  line-height: 30px;
  padding: 0 10px;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  font-size: 14px;
  color: #000000;
  margin-right: 10px;
  &.canClick{
    cursor: pointer;
  }
  .dot{
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #626CD9;
    border-radius: 50%;
    margin-right: 5px;
    &.green{
      background-color: #67D68C;
    }
    &.red{
      background-color: #FF0000;
    }
  }
}


::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  width: 6px;
  background-color: #ECECEC;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  
}

::-webkit-scrollbar-thumb {
  background: #fff;
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  box-shadow: inset 0 0 0 3px #ECECEC ;
}

::-webkit-scrollbar-thumb:hover {
  background-color:#fff;
}

.el-table__body-wrapper::-webkit-scrollbar {
  display: block;
  width: 8px; /*滚动条宽度*/
  height: 8px; /*滚动条高度*/
}
.el-table__body-wrapper::-webkit-scrollbar-track {
  border-radius: 10px; /*滚动条的背景区域的圆角*/
  -webkit-box-shadow: inset 0 0 6px rgba(238,238,238, 0.3);
  background-color: #eeeeee; /*滚动条的背景颜色*/
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px; /*滚动条的圆角*/
  -webkit-box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3);
  background-color: rgb(145, 143, 143); /*滚动条的背景颜色*/
}

.loading-win{
  .el-loading-spinner{
    .path{
      stroke: #4971FF;
    }
    .el-loading-text{
      color: #4971FF;
    }
  }
}